<template>
  <div class="index-header">
    <!-- 头部 -->
    <div class="header">
      <!-- 版心 -->
      <div class="container">
        <!-- header上部 -->
        <div class="h-top">
          <!-- header左上 -->
          <div class="fl">
            <router-link to="/" title="链家网" class="logo"></router-link>
            <span class="dv">
              <router-link to="/City">
                <i></i>
                <span>西安</span>
              </router-link>
            </span>
          </div>
          <!-- header右上 -->
          <div class="fr">
            <div v-show="!phone" class="h-user">
              <i></i>
              <router-link to="/login">登录</router-link>
              <router-link to="/register">立即注册</router-link>
            </div>
            <div v-show="phone" class="h-user">
              <i></i>
              <span @click="toPer" style="color:#fff; padding:0 10px;">{{ phone }}</span>
              <button @click="updatePhone('')" style="background:transparent; border:0;border-bottom: 1px solid #ccc; color:#fff">退出</button>
            </div>
            <div>
              <ul>
                <li>
                  <router-link to="/a">二手房</router-link>
                </li>
                <li>
                  <router-link to="/b">新房</router-link>
                </li>
                <li>
                  <router-link to="/list">租房</router-link>
                </li>
                <li>
                  <router-link to="/c"
                    >商业办公</router-link
                  >
                </li>
                <li>
                  <router-link to="/d">工具</router-link>
                </li>
                <li>
                  <router-link to="/publish"
                    >发布房源</router-link
                  >
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!-- header中心 -->
        <div class="h-center">
          <div class="c-top"></div>
          <div class="c-center">
            <!--信息滚动栏-->
            <div class="scrollDiv">
              <!-- Carousel 走马灯:在有限空间内，循环播放同一类型的图片、文字等内容 -->
              <el-carousel
                direction="vertical"
                :autoplay="true"
                :interval="5000"
              >
                <el-carousel-item v-for="lb of items" :key="lb">
                  <div>{{ lb }}</div>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
          <!--头部搜索栏-->
          <div class="c-select">
            <ul>
              <li
                @click="now = i"
                :class="{ on: now == i }"
                v-for="(nav, i) in navs"
                :key="i"
              >
                {{ nav }}
              </li>
            </ul>
            <div class="search-ipt">
              <!-- 小三角-->
              <div class="search" v-show="now == 0">
                <span class="search-icon"></span>
                <div>
                  <el-autocomplete
                    id="input"
                    @keyup.enter.native="goto"
                    popper-class="my-autocomplete"
                    v-model="kw"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入区域、商圈或小区名开始找房"
                    @select="handleSelect">
                    
                    <template slot-scope="{ item }">
                      <div class="name">{{ item.value }}</div>
                      <span class="addr">{{ item.address }}</span>
                    </template>
                  </el-autocomplete>

                  <router-link to="/ditu" target="_blank" class="dingwei">
                    <div class="el-icon-map-location"></div>
                    地图
                    </router-link>
                  <router-link :to="`/about/${kw}`">开始找房</router-link>
                </div>
              </div>
              <div class="search" v-show="now == 1">
                <span class="search-icon2"></span>
                <div>
                  <el-autocomplete
                    id="input"
                    @keyup.enter.native="goto"
                    popper-class="my-autocomplete"
                    v-model="kw"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入楼盘名称开始找房"
                    @select="handleSelect">
                    
                    <template slot-scope="{ item }">
                      <div class="name">{{ item.value }}</div>
                      <span class="addr">{{ item.address }}</span>
                    </template>
                  </el-autocomplete>
                  <router-link :to="`/about/${kw}`">开始找房</router-link>
                </div>
              </div>
              <div class="search" v-show="now == 2">
                <span class="search-icon3"></span>
                <div>
                  <el-autocomplete
                    id="input"
                    @keyup.enter.native="goto"
                    popper-class="my-autocomplete"
                    v-model="kw"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入区域、商圈或小区名开始找房"
                    @select="handleSelect">
                    
                    <template slot-scope="{ item }">
                      <div class="name">{{ item.value }}</div>
                      <span class="addr">{{ item.address }}</span>
                    </template>
                  </el-autocomplete>

                  <router-link to="/ditu" target="_blank" class="dingwei">
                    <div class="el-icon-map-location"></div>
                    地图
                    </router-link>
                  <router-link :to="`/about/${kw}`">开始找房</router-link>
                </div>
              </div>
              <div class="search" v-show="now == 3">
                <span class="search-icon4"></span>
                <div>
                  <el-autocomplete
                    id="input"
                    @keyup.enter.native="goto"
                    popper-class="my-autocomplete"
                    v-model="kw"
                    :fetch-suggestions="querySearch"
                    placeholder="请输入小区名开始查找小区"
                    @select="handleSelect">
                    
                    <template slot-scope="{ item }">
                      <div class="name">{{ item.value }}</div>
                      <span class="addr">{{ item.address }}</span>
                    </template>
                  </el-autocomplete>

                  <router-link to="/ditu" target="_blank" class="dingwei">
                    <div class="el-icon-map-location"></div>
                    地图
                    </router-link>
                  <router-link :to="`/about/${kw}`">开始找房</router-link>
                </div>
              </div>
              <div class="search" v-show="now == 4">
                <span class="search-icon5"></span>
                <div>
                  <el-autocomplete
                    id="input"
                    @keyup.enter.native="goto"
                    popper-class="my-autocomplete"
                    v-model="kw"
                    :fetch-suggestions="querySearch"
                    placeholder="房产知识有疑问？来搜搜看吧~"
                    @select="handleSelect">
                    
                    <template slot-scope="{ item }">
                      <div class="name">{{ item.value }}</div>
                      <span class="addr">{{ item.address }}</span>
                    </template>
                  </el-autocomplete>

                  <router-link to="/ditu" target="_blank" class="dingwei">
                    <div class="el-icon-map-location"></div>
                    地图
                    </router-link>
                  <router-link :to="`/about/${kw}`">开始找房</router-link>
                </div>
              </div>
            </div>
            
          </div>
        </div>
        <!-- header底部 -->
        <div class="h-footer">
          <div class="pen">
            <a href="https://page.lianjia.com/subject/8334.html">
              <img src="../assets/img/lsm_index_16.png" alt="" />
              <span>房地产中介诚信服务及保证书</span>
            </a>
          </div>
          <div class="pen">
            <a href="https://m.lianjia.com/archer/activity/pc/statement">
              <img src="../assets/img/lsm_index_17.png" alt="" />
              <span>关于仿冒我公司进行不正当竞争行为的郑重声明</span>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入样式
// import "../assets/css/index_header.css"
import { mapState, mapMutations } from "vuex";
export default {
  computed: {
    ...mapState(["phone"]),
  },
  data() {
    return {
      // 文字滚动数据
      items: [
        "西安链家真实租房 83807 套",
        "西安链家在售新房楼盘 360 个",
        "西安连接真实在售二手房 109284 套",
      ],
      navs: ["找二手房", "找新房", "找租房", "找小区", "搜问答"],
      now: 0,
      kw: "",
    };
  },
  methods: {
    toPer(){
      this.$router.push('/percenter')
    },
    ...mapMutations(["updatePhone"]),
    goto() {
      const path = `/list/${this.kw}`;
      // 如果当前路径 和 要跳转的路径相同，则终止
      if (this.$router.path == path) return;
      this.$router.push(path);
      this.kw = ""; // 清空输入框的内容
    },
    querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      loadAll() {
        return [
          { "value": "鑫泰园东区 4居室 南卧", "address": "雁塔-城南-鑫泰园东区" },
          { "value": "金丰大厦 4居室 南卧", "address": "碑林-城西-金丰大厦" },
          { "value": "丽苑山水 2室2厅 南/北", "address": "莲湖-城西-丽苑山水" },
          { "value": "兴庆小区永嘉坊 5居室 南卧", "address": "碑林-城东-兴庆小区永嘉坊" },
          { "value": "鲁家湾 2室1厅 南/北", "address": "长安-长安-鲁家湾" },
          { "value": "御笔华章小区 5居室 南卧", "address": "莲湖-城西-御笔华章小区" },
          { "value": "盛安广场 1室0厅 西", "address": "碑林-黄雁村-盛安广场" },
          { "value": "汉都新苑A区 5居室 北卧", "address": "未央-草滩-汉都新苑A区" },
          { "value": "大洋时代国际 1室0厅 南", "address": "碑林-城西-大洋时代国际" },
          { "value": "鼎诚馥桂园 5居室 南卧", "address": "莲湖-城西-鼎诚馥桂园" }
        ];
      },
      handleSelect(item) {
        console.log(item);
      },
      handleIconClick(ev) {
        console.log(ev);
      }
  },
  mounted() {
    this.restaurants = this.loadAll();
  }
};
</script>
<style lang="scss" scoped>
  .my-autocomplete {
  li {
    line-height: normal;
    padding: 7px;

    .name {
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .addr {
      font-size: 12px;
      color: #b4b4b4;
    }

    .highlighted .addr {
      color: #ddd;
    }
  }
}
</style>
<style scoped src="../assets/css/reset.css"></style>
<style scoped src="../assets/css/index_header.css"></style>
